<template>
  <div class="page">
    <PageSearch
      :searchFormConfig="searchFormConfig"
      @resetClick="resetClick"
      @queryClick="queryClick"
      is-over
      :is-show-row-count="2"
      class="page-search"
    >
      <template #inputSlot>
        <el-input placeholder="自定义插槽输入" v-model="defaultVal" @change="handleInputChange" />
      </template>
      <template #footerBtn>
        <el-button type="primary" @click="handleEditClick()"> 新增 </el-button>
      </template>
    </PageSearch>

    <div
      class="content"
      :style="{
        height: `calc(100% - ${contentHight + 72}px)`
      }"
    >
      <PageContent
        :contentTableConfig="contentTableConfig"
        :url="fetchUrl"
        :queryParams="queryParams"
        ref="pageContentRef"
      >
        <template #type>
          <el-button size="small">跳转</el-button>
        </template>
        <template #status="scope">
          <el-button size="small" :type="scope.row.status ? 'success' : 'danger'">
            {{ scope.row.status ? '启用' : '禁用' }}
          </el-button>
        </template>
        <template #handler="scope">
          <div class="handle-btns">
            <el-button size="small" @click="handleEditClick(scope.row)"> 编辑 </el-button>
            <el-button size="small" type="danger" @click="handleDeleteClick(scope.row)">
              删除
            </el-button>
          </div>
        </template>
      </PageContent>
    </div>
    <PageModal
      ref="pageModalRef"
      :width="'50%'"
      :modalConfig="modalConfig"
      :title="isEdit ? '编辑' : '新增'"
      :default-info="isEdit ? defaultInfo : {}"
    >
      <template #inputSlot>
        <el-input placeholder="自定义插槽输入" v-model="defaultVal" @change="handleInputChange" />
      </template>
      <template #uploadSlot>
        <span>支持自定义上传组件</span>
      </template>
    </PageModal>
  </div>
</template>

<script setup lang="ts">
import PageSearch from '@/components/page-search/index.vue'
import PageContent from '@/components/page-content/index.vue'
import PageModal from '@/components/page-modal/index.vue'
import { searchFormConfig } from './configs/search.config'
import { contentTableConfig } from './configs/content.config'
import { modalConfig, defaultInfo } from './configs/modal.config'
import { computed, ref } from 'vue'
import { useHeight } from '@/hooks/use-height'
import dayjs from 'dayjs'

// 请求地址
const fetchUrl = '/api/user/list'

// 重置按钮
const resetClick = () => {
  queryParams.value = {}
}

// 表格组件
const pageContentRef = ref<InstanceType<typeof PageContent>>()

// 模态框组件
const pageModalRef = ref<InstanceType<typeof PageModal>>()

// 查询参数
const queryParams = ref({})

// 查询事件
const queryClick = (payload: any) => {
  const params = {
    ...payload,
    startTime: payload.createTime ? dayjs(payload.createTime[0]).format('YYYY-MM-DD') : '',
    endTime: payload.createTime ? dayjs(payload.createTime[1]).format('YYYY-MM-DD') : ''
  }
  delete params.createTime
  queryParams.value = params
  pageContentRef.value?.queryTableData(queryParams.value)
}

// 编辑/新增事件
const isEdit = ref(false)
const handleEditClick = (item?: any) => {
  isEdit.value = !!item
  pageModalRef.value?.openModal()
}

// 删除事件
const handleDeleteClick = (item: any) => {
  console.log(item)
}

const contentHight = computed(() => useHeight())

const defaultVal = ref('')
const handleInputChange = () => {
  console.log(defaultVal.value)
}
</script>
<style scoped lang="less">
.page {
  background: white;
}
.page-search {
  padding: 20px 20px 0;
}
.menu-tree {
  margin-left: 25px;
}
.content {
  padding: 20px 20px 0;
  transition: height 0.5s ease;
}
</style>
